<template>
  <div>
    <van-nav-bar class="header" title="订单" />

    <div class="order">
      <div :class="{ active: bool2 }" @click="handleColor">外卖订单</div>
      <div :class="{ active: !bool2 }" @click="handleColor2">堂食订单</div>
    </div>

    <div class="option">
      <div :class="{ active1: isActive === 0 }" @click="changeClass(0)">全部</div>
      <div :class="{ active1: isActive === 1 }" @click="changeClass(1)">待付款</div>
      <div :class="{ active1: isActive === 2 }" @click="changeClass(2)">已完成</div>
      <div :class="{ active1: isActive === 3 }" @click="changeClass(3)">已取消</div>
    </div>
    <!-- 订单信息 -->
    <div v-for="(itm, index) in 1" v-show="0 == num">
      <div v-for="item in Order.payAll" key="index">
        <div class="box" v-show="bool">
          <div class="top" @click="handleFin">
            <div class="flex first">
              <div>订单编号:&nbsp;FF20200303</div>
              <div class="gray">{{ item.status }}</div>
            </div>
            <div class="flex second">
              <img v-for="(itm1, index) in item.slice(0, 3)" :src="itm1.img" alt="">
            </div>
            <div class="flex three">
              <p v-for="(itm1, index) in item.slice(0, 1)" class="gray">共{{ itm1.n }}件，合计:&nbsp;</p>
              <p v-for="(itm1, index) in item.slice(0, 1)" class="right">￥{{ itm1.n * parseInt(String(itm1.price)) }}
              </p>
            </div>
          </div>

          <div class="four">
            <div class="delete" @click="handleDelete">删除订单</div>
            <div class="again" @click="handleDel">再次购买</div>
          </div>
        </div>
      </div>
    </div>

    <div v-for="(itm, index) in 1" v-show="1 == num">
      <div v-for="item in Order.payFail" key="index">
        <div class="box" v-show="bool">
          <div class="top" @click="handleFin">
            <div class="flex first">
              <div>订单编号:&nbsp;FF20200303</div>
              <div class="gray">{{ item.status }}</div>
            </div>
            <div class="flex second">
              <img v-for="(itm1, index) in item.slice(0, 3)" :src="itm1.img" alt="">
            </div>
            <div class="flex three">
              <p v-for="(itm1, index) in item.slice(0, 1)" class="gray">共{{ itm1.n }}件，合计:&nbsp;</p>
              <p v-for="(itm1, index) in item.slice(0, 1)" class="right">￥{{ itm1.n * parseInt(String(itm1.price)) }}
              </p>
            </div>
          </div>

          <div class="four">
            <div class="delete" @click="handleDelete">删除订单</div>
            <div class="again" @click="handleDel">再次购买</div>
          </div>
        </div>
      </div>
    </div>

    <div v-for="(itm, index) in 1" v-show="2 == num">
      <div v-for="item in Order.paySuc" key="index">
        <div class="box" v-show="bool">
          <div class="top" @click="handleFin">
            <div class="flex first">
              <div>订单编号:&nbsp;FF20200303</div>
              <div class="gray">{{ item.status }}</div>
            </div>
            <div class="flex second">
              <img v-for="(itm1, index) in item.slice(0, 3)" :src="itm1.img" alt="">
            </div>
            <div class="flex three">
              <p v-for="(itm1, index) in item.slice(0, 1)" class="gray">共{{ itm1.n }}件，合计:&nbsp;</p>
              <p v-for="(itm1, index) in item.slice(0, 1)" class="right">￥{{ itm1.n * parseInt(String(itm1.price)) }}
              </p>
            </div>
          </div>

          <div class="four">
            <div class="delete" @click="handleDelete">删除订单</div>
            <div class="again" @click="handleDel">再次购买</div>
          </div>
        </div>
      </div>
    </div>



    <div class="empty"></div>
    <div class="show" v-show="bool1">
      <div class="button" @click="handleGo">去点餐</div>
    </div>
  </div>
  <!-- <FooterVue /> -->
</template>

<script setup lang="ts">
import { nextTick, ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { useOrderDel } from '../../store/orderDel';
import { getSuc, getFail, getAll, payAll } from '../../api/orderDel'
import FooterVue from '../../components/foot.vue'
const router = useRouter()
const Order = useOrderDel()

const handleDel = () => {
  router.push({
    path: '/orderdel'
  })
}

const bool = ref(true)
const bool1 = ref(false)
const bool2 = ref(true)
const isActive = ref(0)
const num = ref(0)

const handleColor = () => {
  bool2.value = true
}

const handleColor2 = () => {
  bool2.value = false
}

const changeClass = (i: number) => {
  isActive.value = i
  num.value = i
}

const handleDelete = () => {
  // nextTick(() => {
  localStorage.removeItem('carlist')
  Order.cartAllInfo.allNum = 0
  Order.cartAllInfo.Allprice = 0
  Order.list = []
  // console.log(Object.values(Order.all))
  Object.values(Order.all).forEach(item => {
    // console.log(item)
    item.forEach(itm => {
      itm.n = 0
    })
  })

  // })
  bool.value = false
  bool1.value = true
}
const handleGo = () => {
  router.push({
    path: '/orderdel'
  })
}

const handleFin = () => {
  router.push({
    path: '/finished'
  })
}

//获取订单信息

interface List {
  img: string,
  objectId: string,
  price: string,
  name: string,
  num: string
}
getAll().then(res => {
  (res.data.results).forEach(item => {
    Order.payAll.unshift(item.res1)
    Order.payAll.forEach(itm => {
      itm.status = item.status
    })
  })
})
console.log(Order.payAll)
getFail().then(res => {
  (res.data.results).forEach(item => {
    Order.payFail.unshift(item.res1)
    Order.payFail.forEach(itm => {
      itm.status = item.status
    })
  })
})
getSuc().then(res => {
  (res.data.results).forEach(item => {
    Order.paySuc.unshift(item.res1)
    Order.paySuc.forEach(itm => {
      itm.status = item.status
    })
  })
})
console.log(Order.payFail)
console.log(Order.paySuc)
console.log(Order.payAll)



</script>

<style lang="scss" scoped>
.current {
  display: block;
}

.active {
  background-color: rgb(243, 64, 64);
  color: #fff;
}

.active1 {
  color: rgb(243, 64, 64);
  border-bottom: 2px solid rgb(243, 64, 64);
}

.show {
  height: 300px;
  display: flex;
  align-items: center;
  width: 100%;
  // background-color: aquamarine;
  text-align: center;

  .button {
    width: 70px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    margin: 0 auto;
    background-color: skyblue;

    &:hover {
      background-color: rgb(243, 64, 64);
      color: #fff;
    }
  }




}

.empty {
  height: 10px;
  background-color: rgb(243, 238, 238);
}

.gray {
  color: rgb(172, 170, 170);
}

:root {
  --van-nav-bar-arrow-size: 25px
}

.order {
  height: 50px;
  display: flex;
  // background-color: aquamarine;

  div {
    line-height: 50px;
    width: 50%;
    text-align: center;
    font-size: 18px;
  }
}

// .one {
//   &:hover {
//     background-color: rgb(243, 64, 64);
//     color: #fff;
//   }
// }

// .two {
//   &:hover {
//     background-color: rgb(243, 64, 64);
//     color: #fff;
//   }
// }


.option {
  display: flex;
  height: 50px;

  div {
    width: 25%;
    line-height: 50px;
    text-align: center;
    font-size: 16px;

    // &:hover {
    //   color: rgb(243, 64, 64);
    //   border-bottom: 2px solid rgb(243, 64, 64);
    // }
  }
}

.flex {
  display: flex;
}

.box {
  height: 220px;

  .top {
    height: 160px;
    // background-color: aquamarine;
    border-bottom: 1px solid rgb(194, 192, 192);
    box-sizing: border-box;
  }

  .first {
    justify-content: space-between;
    padding: 10px 10px;
    font-size: 16px;
  }

  .second {
    height: 60px;


    img {
      height: 60px;
      width: 60px;
      background-color: blue;
      margin: 3px 13px;
    }
  }
}

.three {
  float: right;

  p {
    font-size: 16px;
  }

  .right {
    margin-right: 15px;
    color: rgb(243, 64, 64);
  }
}

.four {
  line-height: 70px;
  width: 100%;
  text-align: center;
  // background-color: aquamarine;
  display: flex;


  .delete {
    width: 100px;
    height: 40px;
    line-height: 40px;
    // background-color: blueviolet;
    margin: 10px;
    margin-left: 150px;
    font-size: 16px;
    border: 1px solid rgb(243, 64, 64);
  }

  .again {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: rgb(243, 64, 64);
    margin: 10px;
    float: right;
    font-size: 16px;
    color: #fff;
    border: 1px solid transparent;
  }
}
</style>